import React from 'react'
import { Row,Col,Card, Icon } from 'antd';
import style from './UserList.css'
import {roleList,addRole,delRole} from '../../services/userList'



class RoleList extends React.Component{
  state = {
      roleList:[],
      rowData:{},
    };
   
    componentDidMount() {
        roleList().then(data =>{
            this.setState({
                roleList:data.data,
                rowData:this.props.rowData
            })
        })
    }
    componentWillReceiveProps(nextProps){
       this.setState({
            rowData:nextProps.rowData
       })
    }
    hasRole=(role)=>{
       
        const roles = this.state.rowData.roles;
        const rolesSet = new Set(roles);
        return rolesSet.has(role);
    }
    addRole=(roleName)=>{
        const row = this.state.rowData
        const params = {
            id:row.id,
            role_list:roleName
        }
        addRole(params).then(data =>{
            if(data.status === 0){
               
                this.props.updateTableData(data.data)
                this.setState({
                    rowData:data.data
                })
            }
        })
    }
    delRole=(roleName)=>{
        const row = this.state.rowData
        const params = {
            id:row.id,
            role_list:roleName
        }
        delRole(params).then(data =>{
            let roles = row.roles
            for(let i=0;i<roles.length;i++){
                if(roles[i] == roleName){
                    roles.splice(i,1);
                }
            }
            row.roles = roles
            this.props.updateTableData(row)
            this.setState({
                rowData:row
            })
            
        })
    }
    handleClick=(roleName)=>{
        if(this.hasRole(roleName)){
            this.delRole(roleName)
        }else{
            this.addRole(roleName)
        }
    }
    render(){
        const roleList = this.state.roleList
        const rowData = this.state.rowData;
        return (
            <Row gutter={16}>
            
                {roleList.map((item,index) =>{
                    if(rowData.user_type == item.allowed_user_type){
                        return (
                            <Col span={8} key={item.id} >
                                <div style={{position:"relative",marginBottom:10}}>
                                    <Card  style={{cursor:'pointer'}} onClick={()=>this.handleClick(item.name)}>
                                        <h2>{item.name}</h2>
                                        <span>{item.display_name}</span>
                                    </Card>
                                    {
                                        this.hasRole(item.name)?<span className={style.circle} >
                                        <Icon type="check" className={style.icon} />
                                    </span>:''
                                    }
                                </div>
                            </Col>
                        )
                    }
                })}
    
            </Row>
            
        )
    }
}

export default RoleList
